<script setup lang='ts'>
import { onMounted, ref } from "vue";
import { getTitleMaterial } from "../api/api";
import content from "../components/content.vue";
import { useRoute, useRouter } from "vue-router";
import titleDatapc from "./pc/titleDatapc.vue";
import { page } from "../utils/reload";
const { loading, onRefresh } = page()
const router = useRouter()
const route = useRoute()
const title = ref()
const data = ref()
onMounted(async () => {
    title.value = route.query.type
    const res = await getTitleMaterial({ title: title.value })
    data.value = res.data.data
})
const onClickLeft = () => history.back();
const toSearch = () => {
    router.push({ name: 'search' })
}
</script>

<template>
    <div class="m">
        <van-nav-bar fixed placeholder :title left-text="返回" color="black" left-arrow @click-left="onClickLeft">
            <template #right>
                <van-icon name="search" size="24" @click="toSearch" color="black" />
            </template>
        </van-nav-bar>
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <div class="conent">
                <content :data></content>
            </div>
        </van-pull-refresh>
    </div>
    <div class="pc">
        <titleDatapc></titleDatapc>
    </div>
</template>

<style scoped>
.conent {
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
    min-height: calc(100vh - 100px);
}
@media screen and (max-width:1024px) {
    .m {
        display: block;
    }

    .pc {
        display: none;
    }
}

@media screen and (min-width:1025px) {
    .m {
        display: none;
    }

    .pc {
        display: block;
    }
}
</style>